<template>
  <ag-grid-vue
    ref="grid"
    :columnDefs="columnDefs"
    :rowData="rowData"
    :editable="true"
    :style="{ height: gridHeight }"
    :pagination="false"
    :getRowNodeId="function(params){return params.AutoId}"
    class="ag-theme-material"
    @grid-ready="onGridReady"
    @cellClicked="cellClicked"
    @cellValueChanged="cellValChged"
  ></ag-grid-vue>
</template>
<script>
import ProductionEditor from '@/components/CellEditor/ProductionEditor'
import ProductionRenderer from '@/components/CellRenderer/ProductionRenderer'
import NumberEditor from '@/components/CellEditor/NumberEditor'
import DimensionEditor from '@/components/CellEditor/DimensionEditor'
import DimensionRenderer from '@/components/CellRenderer/DimensionRenderer'
import BooleanEditor from '@/components/CellEditor/BooleanEditor'
import BooleanRenderer from '@/components/CellRenderer/BooleanRenderer'
import { getProduction, getPriceByProduction } from '@/api/production'
import { AgGridVue } from 'ag-grid-vue'

export default {
  components: {
    AgGridVue,
    DimensionEditor,
    DimensionRenderer,
    ProductionEditor,
    ProductionRenderer,
    NumberEditor,
    BooleanEditor,
    BooleanRenderer
  },
  props: ['rowData'],
  data() {
    return {
      rowIdxEdit: null, //正在点击的行索引
      columnInEdit: null, //正在点击的列定义
      rowEdit: null, //正在点击的行
      frameworkComponents: null,
      gridHeight: '',
      gridApi: null,
      columnApi: null,
      //rowData: null,
      columnDefs: [
        { headerName: '', field: 'chk', width: 50, checkboxSelection: true },
        {
          headerName: '产品',
          field: 'ProductionId',
          sortable: true,
          filter: true,
          cellEditorFramework: 'ProductionEditor',
          cellRendererFramework: 'ProductionRenderer',
          editable: true
        },
        {
          headerName: '品号',
          field: 'ProductionCode',
          sortable: true,
          filter: true
        },
        {
          headerName: '规格',
          field: 'ProductionStd',
          sortable: true,
          filter: true
        },
        {
          headerName: '单位',
          field: 'Unit',
          sortable: true,
          filter: true
        },
        {
          headerName: '确认单价',
          field: 'Price',
          sortable: true,
          filter: true,
          editable: false
        },
        {
          headerName: '数量',
          field: 'Qty',
          sortable: true,
          filter: true,
          editable: true,
          cellEditorFramework: 'NumberEditor'
        },
        {
          headerName: '确认小计',
          field: 'Amount',
          sortable: true,
          filter: true,
          editable: false
        },
        {
          headerName: '已交数',
          field: 'DeliveryQty',
          sortable: true,
          filter: true,
          editable: false
        },
        {
          headerName: '备注',
          field: 'Note',
          sortable: true,
          filter: true,
          editable: true
        },
        {
          headerName: this.$store.state.modules.dimension[0].Name,
          field: 'Dimension1',
          sortable: true,
          filter: true,
          cellEditorFramework: 'DimensionEditor',
          cellRendererFramework: 'DimensionRenderer',
          editable: true
        },
        {
          headerName: this.$store.state.modules.dimension[1].Name,
          field: 'Dimension2',
          sortable: true,
          filter: true,
          cellEditorFramework: 'DimensionEditor',
          cellRendererFramework: 'DimensionRenderer',
          editable: true
        },
        {
          headerName: this.$store.state.modules.dimension[2].Name,
          field: 'Dimension3',
          sortable: true,
          filter: true,
          cellEditorFramework: 'DimensionEditor',
          cellRendererFramework: 'DimensionRenderer',
          editable: true
        },
        {
          headerName: this.$store.state.modules.dimension[3].Name,
          field: 'Dimension4',
          sortable: true,
          filter: true,
          cellEditorFramework: 'DimensionEditor',
          cellRendererFramework: 'DimensionRenderer',
          editable: true
        },
        {
          headerName: this.$store.state.modules.dimension[4].Name,
          field: 'Dimension5',
          sortable: true,
          filter: true,
          cellEditorFramework: 'DimensionEditor',
          cellRendererFramework: 'DimensionRenderer',
          editable: true
        },
        {
          headerName: this.$store.state.modules.dimension[5].Name,
          field: 'Dimension6',
          sortable: true,
          filter: true,
          cellEditorFramework: 'NumberEditor',
          editable: true
        },
        {
          headerName: this.$store.state.modules.dimension[6].Name,
          field: 'Dimension7',
          sortable: true,
          filter: true,
          cellEditorFramework: 'NumberEditor',
          editable: true
        },
        {
          headerName: this.$store.state.modules.dimension[7].Name,
          field: 'Dimension8',
          sortable: true,
          filter: true,
          cellEditorFramework: 'NumberEditor',
          editable: true
        },
        {
          headerName: this.$store.state.modules.dimension[8].Name,
          field: 'Dimension9',
          sortable: true,
          filter: true,
          cellEditorFramework: 'NumberEditor',
          editable: true
        },
        {
          headerName: this.$store.state.modules.dimension[9].Name,
          field: 'Dimension10',
          sortable: true,
          filter: true,
          cellEditorFramework: 'NumberEditor',
          editable: true
        }
      ]
    }
  },
  watch: {
    rowIdxEdit: function(value) {
      let _this = this
      this.getProduction(this.rowEdit.ProductionId, function(data) {
        _this.columnApi.getColumn('Dimension1').colDef.editable =
          data.Dimension1
        if (data.Dimension1) {
          _this.columnApi.getColumn('Dimension1').colDef.cellEditorParams = {
            conditions: { level: 1, production: data.AutoId }
          }
        }
        _this.columnApi.getColumn('Dimension2').colDef.editable =
          data.Dimension2
        if (data.Dimension2) {
          _this.columnApi.getColumn('Dimension2').colDef.cellEditorParams = {
            conditions: { level: 2, production: data.AutoId }
          }
        }
        _this.columnApi.getColumn('Dimension3').colDef.editable =
          data.Dimension3
        if (data.Dimension3) {
          _this.columnApi.getColumn('Dimension3').colDef.cellEditorParams = {
            conditions: { level: 3, production: data.AutoId }
          }
        }
        _this.columnApi.getColumn('Dimension4').colDef.editable =
          data.Dimension4
        if (data.Dimension4) {
          _this.columnApi.getColumn('Dimension4').colDef.cellEditorParams = {
            conditions: { level: 4, production: data.AutoId }
          }
        }
        _this.columnApi.getColumn('Dimension5').colDef.editable =
          data.Dimension5
        if (data.Dimension5) {
          _this.columnApi.getColumn('Dimension5').colDef.cellEditorParams = {
            conditions: { level: 5, production: data.AutoId }
          }
        }

        _this.columnApi.getColumn('Dimension6').colDef.editable =
          data.Dimension6
        _this.columnApi.getColumn('Dimension7').colDef.editable =
          data.Dimension7
        _this.columnApi.getColumn('Dimension8').colDef.editable =
          data.Dimension8
        _this.columnApi.getColumn('Dimension9').colDef.editable =
          data.Dimension9
        _this.columnApi.getColumn('Dimension10').colDef.editable =
          data.Dimension10
      })
    },
    rowData: function(value) {
      this.rowIdxEdit = null
    }
  },
  methods: {
    getProduction(id, succHandler, errHandler) {
      getProduction(id)
        .then(response => {
          if (response.Result === 0) {
            succHandler(response.Data)
          } else {
            if (errHandler) errHandler()
          }
        })
        .catch(err => {
          if (errHandler) errHandler()
        })
    },
    cellValChged(params) {
      if (params.newValue === params.oldValue) {
        return
      }
      if (
        params.column.colId === 'Qty' ||
        params.column.colId === 'ProductionId' ||
        params.column.colId === 'Price'
      ) {
        params.node.setDataValue('Amount', params.data.Price * params.data.Qty)
      }
    },
    onGridReady(params) {
      this.gridApi = params.api
      this.columnApi = params.columnApi
    },
    getSelected() {
      const selectedNodes = this.gridApi.getSelectedNodes()
      const selectedData = selectedNodes.map(node => node.data)
      return selectedData
    },
    cellClicked(params) {
      this.rowIdxEdit = params.rowIndex
      this.rowEdit = params.data
      this.columnInEdit = params.colDef
    }
  },
  mounted() {
    this.gridHeight = window.innerHeight - 265 + 'px'
    const that = this
    window.onresize = function changeGridSize() {
      that.gridHeight = window.innerHeight - 265 + 'px'
    }
  }
}
</script>

<style lang="scss">
@import "../../../node_modules/ag-grid-community/dist/styles/ag-grid.css";
@import "../../../node_modules/ag-grid-community/dist/styles/ag-theme-balham.css";
@import "../../../node_modules/ag-grid-community/dist/styles/ag-theme-material.css";
</style>
